function listenMousemove (selection, cb) {
  let pressOn = false
  let x
  selection.on('mousemove', function () {
    if (pressOn) {
      const res = d3.mouse(this)
      const x1 = res[0]
      const delta = x1 - x
      x = x1
      cb(delta)
    }
  })
  selection.on('mousedown', function () {
    const res = d3.mouse(this)
    x = res[0]
    pressOn = true
  })
  selection.on('mouseup', function () {
    pressOn = false
  })
}

function drawPath (line, context, arr, color,padding) {
  context.save()
  context.beginPath()
  context.lineWidth = 2
  context.strokeStyle = color
  if (padding) {
    context.translate(padding.left, padding.top)
  }
  line.context(context)
  line(arr)
  context.stroke()
  context.restore()
}

function drawSection (line, context, arr, start, end, padding) {
  const data = arr.slice(start * 4, end * 4)
  const arrR = data.filter((d, i) => i % 4 === 0)
  const arrG = data.filter((d, i) => i % 4 === 1)
  const arrB = data.filter((d, i) => i % 4 === 2)
  const arrA = data.filter((d, i) => i % 4 === 3)

  drawPath(line, context, arrR, 'red')
  drawPath(line, context, arrG, 'green')
  drawPath(line, context, arrB, 'blue')
  drawPath(line, context, arrA, 'orange')
}
